/* 主页样式 */
#fairy{
    width: 100%;
    height: 100px;
    background: url(../img/fairies.gif) center repeat-x;    
}
.heart{
    position: relative;
    width: 50px;
    height: 50px;
    background:pink;
    margin: 0px auto;
    transform: rotate(45deg);
    animation: heartMove 1s ease-in infinite;
    top: 20px;
}
.heart::before,
.heart::after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: pink;
    border-radius: 50%;
}
.heart::before{
    transform: translateX(-50%); /*基于自身宽度的百分比*/
}
.heart::after{
    transform: translateY(-50%);
}
.heart{
    scale: 0.5
}
@keyframes heartMove{
    0%{
            opacity: 0.8;
        transform: scale(0.8) rotate(45deg);
    }
    50%{
        opacity:1;
        transform: scale(1) rotate(45deg);
    }
    100%{
        opacity: 0.8;
        transform: scale(0.8) rotate(45deg);
    }
}
.item1{
    width: 100px;
    height:50px ;
    position: absolute;
    background-color: pink;
    transform: rotate(45deg);
    animation: hearts 3s ease-in infinite;
}
.item1::before,
.item1::after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color:pink;
    border-radius: 50%;
}
.item1::before{
    transform: translateX(-50%); /*基于自身宽度的百分比*/
}
.item1::after{
    transform: translateY(-50%);
}
@keyframes hearts{
    0%{
        opacity: 0.8;
        transform:  translateY(0%) rotate(45deg)  scale(0.8) ;
    }
    50%{
        opacity:1;
        transform:  translateY(-100%)  rotate(45deg) scale(1) ;
    }
    100%{
        opacity: 0.8;
        transform: translateY(-1000%)  rotate(45deg) scale(0.8) ;
    }
}